<template>
	<view>

		<view class="layui-form-select" :class="showPanel ? 'layui-form-selected' : ''" @mouseleave="showPanel=false" @mouseover="showPanel=true">
			
			<div class="layui-select-title" @click="togglePanel">
				<block v-if="showPanel == false && valueList.length == 0">
					<input type="text" :focus="showPanel" @input="toSearch" @confirm="confirmed" placeholder="请选择" class="layui-input">
				</block>
				<block v-if="!showPanel && valueList.length > 0">
					<input :disabled="true" :value="'已选择'+valueList.length+'项'" type="text" class="layui-input">
				</block>
				<block v-if="showPanel">
					<input type="text" :focus="showPanel" @input="toSearch" @confirm="confirmed" :placeholder="showPanel == false ?'请选择':placeholder" class="layui-input">
				</block>
				<i class="layui-edge"></i>
			</div>
			
			<div class="holder" v-if="showPanel"></div>
			<dl class="layui-anim layui-anim-upbit" style="" v-if="showPanel" >
				<dd v-for="( item , index) in list" :key="index" @click="choose(index)" v-if="item.isShow && item.checked">
					<div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
						<span>{{item[titleKey]}}</span>
						<view class="desc">{{item[descKey]}}</view>
						<i class="layui-icon layui-icon-ok"></i>
					</div>
				</dd>
				
				<dd v-for="( item , index) in list" :key="index" @click="choose(index)" v-if="item.isShow && !item.checked">
					<div class="layui-unselect layui-form-checkbox" lay-skin="primary">
						<span>{{item[titleKey]}}</span>
						<view class="desc">{{item[descKey]}}</view>
						<i class="layui-icon layui-icon-ok"></i>
					</div>
				</dd>
			</dl>
		</view>

		<input type="text" :value="valueList" :name="name" style="display: none;">
	</view>
</template>

<script>
	export default {
		name: "multiSelect",
		props: {
			name: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: function() {
					return [];
				}
			},
			value: {
				type: [String, Number,Array,Object],
				default: ''
			},
			titleKey: { //说明文字的主键
				type: String,
				default: 'title'
			},
			descKey: { //说明文字的主键
				type: String,
				default: 'desc'
			},
			valueKey: { //值的主键
				type: String,
				default: 'value'
			},
			placeholder: {
				type: String,
				default: ''
			},
			showOptions : {
				type :Boolean ,
				default : false 
			}
		},

		created() {
			this.showPanel = this.showOptions ;
			this.setDefaultValue();
		},

		watch: {
			list: function() {
				this.setDefaultValue();
			},
			showOptions:function(e){
				this.showPanel = this.showOptions ;
			},
		},

		data() {
			return {
				valueList : [] ,
				showPanel : false 
			};
		},

		methods: {
			
			confirmed:function(e){
				this.showPanel = false ;
			},
			
			togglePanel : function(e){
				if (this.showPanel) {
					this.showPanel = false ;
				}else{
					for (var i = 0; i < this.list.length; i++) {
						var cur = this.list[i] ;
						cur.isShow = true ;
					}
					this.showPanel = true ;
				}
			},
			
			toSearch : function(e){
				var key = e.detail.value ;
				for (var i = 0; i < this.list.length; i++) {
					var cur = this.list[i] ;
					var currentTitle = cur[this.titleKey] ;
					currentTitle = !!currentTitle ? currentTitle+"" : currentTitle ;
					cur.isShow = !key || (!!currentTitle && currentTitle.search(key) > -1 ) ;
				}
			},
			
			choose: function(index) {
				var cur = this.list[index] ;
				cur['checked'] = !cur.checked ;
				this.setValueList();
				var res = {
					index : index ,
					value : this.valueList
				} ;
				this.$emit("change", res );
			},

			setDefaultValue: function(e) {
				var values = this.value;
				var arr = values ? values.split(",") : [];
				for (var i = 0; i < this.list.length; i++) {
					var cur = this.list[i];
					var checked = false ;
					for (var j = 0; j < arr.length; j++) {
						var curVal = arr[j] ;
						if (cur[this.valueKey] == curVal) {
							checked = true ;
							break ;
						}
					}
					cur['checked'] = checked ;
					cur['isShow'] = true ;
				}
				this.setValueList();
			},
			
			setValueList : function(e){
				var valueList = [] ;
				for (var i = 0; i < this.list.length; i++) {
					var cur = this.list[i] ;
					if (cur.checked) {
						valueList.push(cur[this.valueKey]);
					}
				}
				this.valueList = valueList ;
			},
		}
	}
</script>

<style scoped>
.layui-input{
	cursor: pointer;
}
.layui-select-title{
	cursor: pointer;
}
.layui-form-checkbox[lay-skin=primary] span{
	color: #000;
}
.desc{
	display: block;
	width: 100%;
	font-size: 12px;
	color: #8799a3;
}
.layui-form-select .holder{
	position: absolute;
	left: 0;
	top: 35px;
	padding: 5px 0;
	z-index: 890;
	min-width: 100%;
	height: 30px;
}
</style>
